<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>GET&POST</title>
</head>
<body>

<div id="app">
    <h1>Todo List</h1>
    <ul>
        <li v-for="(item, index) in items" :key="index">{{ item }}</li>
    </ul>
    <input type="text" v-model="item">
    <button @click="postApi">添加</button>
</div>

<!-- 引用 vue 和 axios -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
var vm = new Vue({
    el: '#app',
    data: function() {
        return {
            items: [],
            item: '',
        };
    },
    created() {
        // 进入页面请求数据
        axios.get('http://127.0.0.1:3000/').then(response => {
            console.log('\n 【API - get 数据】');
            console.log(response);
            this.items = response.data;
        }).catch(function(err) {
            console.log(err);
        });
    },
    methods: {
        // 点击按钮提交数据
        postApi() {
            axios.post('http://127.0.0.1:3000/', {
                item: this.item
            }).then(response => {
                console.log('\n 【API - get 数据】');
                console.log(response);
                this.items = response.data;
            }).catch(function(err) {
                console.log(err);
            });
        }
    }
});
</script>


</body>
</html>